<template>
	<view class="register_box" style="background: url('/static/public/loginBgc.png') no-repeat; background-size: 100%">
		<!-- <view class="switch" style="width: 50rpx;height: 50rpx;" @click="switchLang">
			<image src="@/static/switch.png" mode=""></image>
		</view> -->
		<view class="login_box">
			<view class="">
				<view class="login_input">
					<input type="text" v-model="account" placeholder="请输入手机号" placeholder-style="fontSize:24rpx">
				</view>
				<view class="login_input">
					<input type="text" v-model="password" :placeholder="$t('login.name1')" v-if="inputType"
						placeholder-style="fontSize:24rpx">
					<input type="password" v-model="password" :placeholder="$t('login.name1')" v-else
						placeholder-style="fontSize:24rpx">
					<view class="" style="margin: 0 20rpx;">
						<u-icon name="eye-fill" size="26" v-if="inputType" @click="inputType = !inputType"></u-icon>
						<u-icon name="eye-off" size="26" v-else @click="inputType = !inputType"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex-between" style="">
				<view class="" style="z-index: 100;color: #00A3FF;font-size: 24rpx;;margin-left: 20rpx;"
					@click="$fun.jump(`/pageA/public/register`)">
					{{$t('login.name2')}}
				</view>
				<!-- <text @click="$fun.jump(`/pageA/public/find`)"
					style="z-index: 100;color: #00A3FF;font-size: 24rpx;;margin-right: 20rpx;">
					{{$t('login.name3')}}？
				</text> -->
			</view>

			<view class="login_button" @click="toLogin">
				{{$t('login.name4')}}
			</view>
			<view class="agreement">
				<checkbox style="transform:scale(0.6)" @click="isCh=!isCh" :checked="isCh" color="#fff"
					backgroundColor="" />
				<text style="color: #999;">{{$t('login.name5')}},
					<text @click="$fun.jump(`/pageB/noticeList/noticeInfo?name=${$t('user.name15')}&type=16`)"
						style="color: #0181c9;">{{$t('user.name15')}}</text>、
					<text @click="$fun.jump(`/pageB/noticeList/noticeInfo?name=${$t('user.name15')}&type=15`)"
						style="color: #0181c9;">{{$t('user.name14')}}</text>
				</text>
			</view>
			<!-- #ifdef H5 -->
			<view class="register" @click="gotoApp" style="color: #fff;">
				{{$t('login.name6')}}
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import loginVue from './login.vue'
	export default {
		data() {
			return {
				mobile: '',
				account: '',
				password: '',
				loginList: [],
				screenHeight: 0,
				isClick: false,
				configObj: {},
				isCh: false,
				loginType: 1,
				inputType: false,
				code: '',
				timeValue: 10,
				timeInterval: null
			}
		},
		onLoad(options) {
			if (options.adminMobile) {
				this.mobile = options.adminMobile
				this.password = options.adminPassword
			}
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.screenHeight = res.windowHeight
				}
			})
			this.$fun.ajax.post('index/config', {}).then(res => {
				this.configObj = res.data
			})
		},
		methods: {
			switchLang() {
				this.$fun.showLoading()
				let val = ''
				if (this._i18n.locale == 'en') {
					val = 'zh'
				} else {
					val = 'en'
				}
				setTimeout(() => {
					// 切换为英文
					this._i18n.locale = val
					uni.setStorageSync('language', val)
					uni.setLocale(val)
					this.$fun.msg(this.$t('user.name22'))
					uni.hideLoading()
				}, 1000)
			},
			gotoApp() {
				// plus.runtime.openURL(this.configObj.download_address);
				// console.log(this.configObj.download_address);
				location.href = this.configObj.download_address
			},
			// 获取验证码
			getCode() {
				if (this.timeInterval) return
				this.timeInterval = setInterval(() => {
					this.timeValue--
					if (this.timeValue <= 0) {
						clearInterval(this.timeInterval)
						this.timeValue = 60
						this.timeInterval = null
					}
				}, 1000)
			},
			goApp() {
				location.href = this.configObj.download_address
			},
			async toLogin() {
				if (this.isClick) {
					return
				}
				const {
					account,
					password
				} = this;
				if (!this.isCh) {
					this.$fun.msg(this.$t('login.name7'));
					return
				}
				// 手机号为空
				if (!account) {
					this.$fun.msg(this.$t('user.name45'));
					return
				}
				// 密码为空
				if (!password) {
					this.$fun.msg(this.$t('login.name1'));
					return
				}
				this.isClick = true
				const sendData = {
					account: account,
					password: password,
				};
				console.log(sendData)
				const result = await this.$fun.ajax.post('user/login', sendData);
				if (result.code === 1) {
					let ispush = true
					let arr = uni.getStorageSync('userCode') ? JSON.parse(uni.getStorageSync('userCode')) : [];
					if (arr.length == 0) {
						arr.push({
							account: account,
							password: password,
							avatar: result.data.userinfo.avatar
						})
					}
					for (var i = 0; i < arr.length; i++) {
						if (arr[i].account == account) {
							ispush = false
						}
					}
					if (ispush) {
						arr.push({
							account: account,
							password: password,
							avatar: result.data.userinfo.avatar
						})
					}
					uni.setStorageSync('userCode', JSON.stringify(arr))
					this.isClick = false
					uni.setStorageSync('token', result.data.userinfo.token)
					this.$fun.msg(result.msg)
					this.$fun.jump('/pages/index/index', 3, 1200)
				} else {
					this.isClick = false
				}
			}
		},

	}
</script>

<style lang='scss'>
	page {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.register_box {
			width: 100%;
			height: 100%;

			/* position: relative; */
			/* background: url('/static/public/loginBgc.png') no-repeat center center; */
			/* background-size: 100% 100%; */
			/* padding-top: 600rpx; */
			/* .register_bg {
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
	
			} */
			.switch {
				position: absolute;
				top: 80rpx;
				right: 50rpx;
			}

			.login_box {
				padding: 0 100rpx;
				position: absolute;
				top: 40%;
				left: 0;
				right: 0;

				.title {
					display: flex;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #232323;
					margin: 80rpx 0 100rpx;
					justify-content: space-around;
				}

				.login_input {
					margin: 24rpx auto;
					width: 100%;
					height: 88rpx;
					background: rgba(94, 94, 94, 0.8);
					border-radius: 50rpx;
					display: flex;
					align-items: center;

					input {
						width: 100%;
						height: 100%;
						box-sizing: border-box;
						padding: 10rpx 30rpx;
						border: none;
						color: #ebebeb;
					}
				}

				.code {
					width: 200rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #00A3FF;
				}

				/* 协议 */
				.agreement {
					/* text-align: center; */
					margin-left: 30rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: red;
					line-height: 28rpx;

					::v-deep.uni-checkbox-input {
						background-color: rgba(94, 94, 94, 0.8);
						border-color: rgba(94, 94, 94, 0.8);
						border-radius: 80rpx !important;

						&:hover {
							background-color: rgba(94, 94, 94, 0.8);
							border-color: rgba(94, 94, 94, 0.8);
						}
					}
				}

				.login_button {
					width: 100%;
					height: 100rpx;
					background: #00A3FF;
					border-radius: 110rpx 110rpx 110rpx 110rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 100rpx;
					letter-spacing: 5rpx;
					margin: 100rpx 0 20rpx;
				}
			}
		}

		.register {
			margin: 80rpx auto;
			width: 260rpx;
			height: 56rpx;
			background: rgba(202, 202, 202, 0.4);
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #232323;
			text-align: center;
			line-height: 56rpx;
		}
	}
</style>